document.addEventListener('DOMContentLoaded', function() {
  initMap();
  
  startAnimations();
  
  bindEvents();
});

let mapData = {
  mapWidth: '110%',
  mapHeight: '100%',
  scale: 1,
  x: 0,
  y: 0,
  mapAreaHeight: 0,
  intervalIds: []
};

function initMap() {
  const mainMap = document.getElementById('mainMap');
  mainMap.src = window.globalData.imagePaths.mainMap;
  
  const mapContainer = document.getElementById('mapContainer');
  mapContainer.style.width = mapData.mapWidth;
  mapContainer.style.height = mapData.mapHeight;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        mainMap.style.display = 'block';
        observer.disconnect();
      }
    });
  });
  observer.observe(document.getElementById('mapContainer'));
}

function startAnimations() {
  const icons = document.querySelectorAll('.location-icon');
  icons.forEach(icon => {
    icon.classList.add('pulse-animation');
  });
}

function bindEvents() {
  document.querySelectorAll('.marker-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const parkId = this.dataset.parkid;
      navigateToDetail(parkId);
    });
  });
  
  initMapDragAndScale();
}

function navigateToDetail(parkId) {
  if (parkId == 1) {
    window.util.navigateToPage('../cultural-park/cultural.html');
  } 
  else if (parkId == 2) {
    window.util.navigateToPage('../mingyue-lake-park/mingyue.html');
  }
}

function initMapDragAndScale() {
  new MapDragScale('mapArea', 'mapContainer', {
    minScale: 1,
    maxScale: 5
  });

}